<template>
    <div class="container">
        <header class="header">
            <ul>
                <li><a href="javascript:window.history.back();"><span class="icon">&#xe738;</span></a></li>
                <li>
                    <h1>资讯</h1>
                </li>
                <li><a href="#"><span class="icon">&#xe624;</span></a></li>
            </ul>
        </header>
        <nav class="nav">
            <ul>
                <li :class="{active:show===1}" @click="showWarn">雷区</li>
                <li :class="{active:show===2}" @click="showQuotation">行情</li>
                <li :class="{active:show===3}" @click="showScience">科普</li>
            </ul>
        </nav>
        <section class="info">
            <ul>
                <li v-for="item in targetList" :key="item.id">
                    <h1>{{item.title}}</h1>
                    <div class="info-img">
                        <img v-for="val in item.imgList" :key="val.index" :src="val" alt="">
                    </div>
                    <p>
                        {{item.source}} {{item.pubtime}}
                        <span class="icon text-r">
                            <a href="javascript:;">&#xe607;</a>
                            <a href="javascript:;">&#xe61b;</a>
                            <a href="javascript:;">&#xe639;</a>
                        </span>
                    </p>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        // 组件名称
        name: 'infoMore',
        // 加载页面的子组件（也没面分离的内容）
        components: {},
        data() {
            return {
                show: 1, //默认显示雷区数据选中
                allList: [], //收集咨询更多页数据的所有列表
                warnList: [], //雷区列表数据
                quotationListt: [], //行情列表数据
                scienceList: [], //科普列表数据
                targetList: [], //真实用于渲染的数据列表
            }

        },
        computed: {

        },
        mounted: function () {
            this.getData();
        },
        methods: {
            getData() {
                axios({
                    method: "get",
                    url: '/data/news_data.json'
                }).then((res) => {
                    let data = res.data
                    // console.log(data);
                    if (data.code == "200") {
                        // this.imgList = data.info_ad
                        // console.log(data.allList)
                        this.allList = data.allList; //把请求返回的数据中的allList赋值给此组件中定义的allList
                        // console.log(this.allList)
                        //遍历allList，把不同类型的房源区分开来
                        this.allList.forEach((v) => {
                            switch (v.type) {
                                case "雷区":
                                    this.warnList.push(v);
                                    break;
                                case "行情":
                                    this.quotationListt.push(v);
                                    break;
                                case "科普":
                                    this.scienceList.push(v);
                                    break;
                                default:
                                    console.log("数据出错，请联系管理员");
                                    break;

                            }
                        })
                        this.targetList = this.show === 1 ? this.warnList : (this.show === 2 ? this
                            .quotationListt : this.scienceList);
                        // console.log("雷区：", this.warnList);
                        // console.log("行情", this.quotationListt);
                        // console.log("科普：", this.scienceList);
                    }
                }).catch((error) => {
                    // 错误（网络中断、请求地址有问题）
                    console.log(error)
                })
                // this.$store.dispatch('getHotList', this.pn)
            },
            //显示雷区数据
            showWarn: function () {
                this.show = 1;
                this.getData();
            },
            //显示行情数据
            showQuotation: function () {
                this.show = 2;
                this.getData();
            },
            //显示科普数据
            showScience: function () {
                this.show = 3;
                this.getData();
            }

        },
        watch: {

        }
    }
</script>

<style scoped lang="less" rel="stylesheet/less">
    .header {
        padding: .3rem .3rem 0;
        height: .5rem;
        position: fixed;
        height: 1.10rem;
        top: 0;
        background-color: #fff;
        box-sizing: border-box;
    }

    .header ul {
        display: flex;
        justify-content: space-between;
    }

    .header ul li {
        width: 2.25rem;
        height: .5rem;
    }

    .header ul li h1 {
        font-size: .48rem;
        text-align: center;
    }

    .header ul li span {
        font-size: .4rem;
        line-height: .6rem;
        display: block;
    }

    .header ul li:last-child span {
        text-align: right;
    }

    .nav {
        padding-top: 1.3rem;
        margin: 0 .3rem;
    }

    .nav ul {
        width: 100%;
        height: .5rem;
    }

    .nav ul::after {
        content: "";
        display: block;
        clear: both;
    }

    .nav ul li {
        font-size: .34rem;
        color: #8b8b8b;
        line-height: .48rem;
        float: left;
        width: 1.5rem;
    }

    .nav ul li a {
        color: inherit;
    }

    .nav ul li.active {
        font-size: .48rem;
        color: #202020;
    }

    .info {
        margin: .5rem .3rem 0;
    }

    .info ul li {
        border-bottom: 1px solid #fafafa;
    }

    .info ul li h1 {
        font-size: .4rem;
        line-height: .65rem;
        letter-spacing: -.04rem;
    }

    .info ul li p {
        font-size: .24rem;
        color: #b7b7b7;
        margin-top: .2rem;
        margin-bottom: .25rem;
    }

    .info ul li p .text-r {
        float: right;
    }

    .info ul li p .text-r a {
        display: inline-block;
        margin: 0 .1rem;
        color: inherit;
    }

    .info ul li .info-img {
        display: flex;
        justify-content: space-between;
    }

    .info ul li .info-img img {
        width: 2.19rem;
        height: 1.82rem;
        display: block;
        float: left;
    }

    .info ul li .img-r {
        float: right;
    }

    .info ul li .info-l {
        width: 4.32rem;
        float: left;
    }

    .info ul li:nth-child(4)::after {
        content: "";
        clear: both;
        display: block;
    }

    @media screen and (max-width:350px) {
        .info ul li p .text-r a {
            display: inline-block;
            margin: 0 .05rem;
            color: inherit;
        }
    }
</style>